<template>
    <div>
        <h1>会员添加页面</h1>
        <table>
            <thead>
                <tr>
                    <td>会员名称</td>
                    <td>
                        <input type="text" v-model="data.Hname">
                    </td>
                </tr>
                <tr>
                    <td>会员年龄</td>
                    <td>
                        <input type="text" v-model="data.Age">
                    </td>
                </tr>
                <tr>
                    <td>会员等级外键</td>
                    <td>
                        <select v-model="data.DJwj">
                            <option value="0">请选择</option>
                            <option v-for="a in dataxlk" :value="a.DId">{{a.Dname}}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>会员图片</td>
                    <td>
                        <input type="file" @change="shan">
                        <img :src="'https://localhost:7258/'+data.HuiTupian" style="width: 100px;height: 100px;">
                    </td>
                </tr>
                <tr>
                    <td>会员状态</td>
                    <td>
                        <input type="checkbox" v-model="data.Hstate">选中表示启用，不勾选表示禁用
                    </td>
                </tr>
                <tr>
                    <td>会员密码</td>
                    <td>
                        <input type="password" v-model="data.Hmima">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="添加" @click="Hadd">
                    </td>
                </tr>
            </thead>
        </table>
    </div>
    <a href="/hlist">登录</a>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import router from '@/router';
//添加Model
const data=ref({
  "HId": 0,
  "Hname": "",
  "Age": 0,
  "DJwj": 0,
  "HuiTupian": "",
  "Hstate": "",
  "Hmima": ""
});
//图片上传
const shan=(e:any)=>{
    var n=e.target.files[0];
    var fn=new FormData();
    fn.append("file",n);
    debugger
    "image/png"
    if(n.size>1023*1024*2)
    {
        alert("上传的图片不能超过2MB");
        return;
    }
    if(n.type!="image/png" && n.type!="image/jpeg")
    {
        alert("上传图片格式只能是jpg、png")
        return;
    }
    axios.post("https://localhost:7258/api/info",fn).then(res=>{
        data.value.HuiTupian=res.data
        if(res.data==res.data)
        {
            alert("图片上传成功");
        }
        else
        {
            alert("图片上传失败");
        }
        
    })
}
const dataxlk=ref([ {
    "DId": 0,
    "Dname": "",
    "QuanYi": "",
    "QYwj": 0,
    "Dstate": true
  }]);
onMounted(()=>{
    xlk();
})
const xlk=()=>{
    axios.get("https://localhost:7258/api/Hui/BangDeng").then(res=>{
        dataxlk.value=res.data;
    })
}
//添加
const Hadd=()=>{
    if(data.value.Hname=="")
    {
        alert("会员名称不能为空");
        return;
    }
    if(data.value.Age==0)
    {
        alert("会员年龄不能为空");
        return;
    }
    if(data.value.DJwj==0)
    {
        alert("会员等级不能为空");
        return;
    }
    if(data.value.HuiTupian=="")
    {
        alert("会员头像上传不能为空")
        return;
    }
    if(data.value.Hmima=="")
    {
        alert("会员密码不能为空");
        return;
    }
    axios.post("https://localhost:7258/api/Hui/AddHui",data.value).then(res=>{
        if(res.data>0)
        {
            alert("添加成功");
            router.push({path:"/hlist"})
        }
        else
        {
            alert("添加失败,用户名重复了")
        }
    })
}




</script>

<style scoped>

</style>